<template>
    <div class="sidebar">
      <el-page-header  icon="el-icon-d-arrow-left" title="返回" @back="goBack"> </el-page-header>


      <el-row>
        <el-col :span="6">
          <el-button class="my_button" icon="el-icon-document-copy" type="info">录入客户信息</el-button>
        </el-col>

      </el-row>
      <el-row>
          <el-col :span="6">
            <el-button class="my_button" icon="el-icon-document-copy" type="info">客户管理</el-button>
          </el-col>
        </el-row>

      <el-table
          :data="groupList"
          style="width: 60%"
          :header-cell-style="headClass"
          :cell-style="rowClass">
        <template #default="scope">
            <el-table-column prop="id"  label="分组编号" width="180" />
            <el-table-column prop="groupName"  label="分组名称" width="180" />
        </template>
      </el-table>

    </div>
</template>

<script>
import group from "@/api/group/group";

export default {
  data() {
    return {
      userId: 191213687,
      groupList: null
    }
  },
  created() {
    this.getGroupInfo()
  },
  methods: {
    // 表头居中显示
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    goBack() {
      console.log('go back')
    },
    getGroupInfo() {
      group.getGroupInfo(this.userId)
          .then((response) => {
            this.groupList = response.data.list;
          }).catch(error => {
        console.log(error);
        this.$message({
          type: "error"
        })
      })
    },

  },
}
</script>

<style scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.my_button{
  margin: 5px 10px;
}
</style>
